<template>
	<view class="">
		<z-paging ref="paging" v-model="list" @query="getList">
			<template slot="top">
				<u-swiper
					:list="['/static/banner/img_banner_01.jpg', '/static/banner/img_banner_02.jpg','/static/banner/img_banner_03.jpg']"
					height="420rpx" circular indicator indicator-mode="dot" radius="0"></u-swiper>
				<u-tabs :current="current" @change="setCurrent" :list="[{ name: '票务中心' }, { name: '卡务中心' }]"
					lineHeight="8rpx" lineWidth="70rpx" :scrollable="false"></u-tabs>
			</template>
			<template v-if="current === 0">
				<view class="d-p-l-30 d-p-r-30">
					<view class="d-list-box d-m-t-20 d-p-20 d-flex d-col-top" v-for="(item, index) in list" :key="index"
						@click="ticketDetail(item.id)">
						<u-image :src="item.picture" width="210rpx" height="248rpx"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-font-30 u-line-1">{{ item.name }}</view>
							<view class="d-flex d-m-t-18">
								<view class="d-tag d-flex">{{ item.specify }}</view>
							</view>
							<!-- <view class="d-font-24 d-be d-m-t-20">{{ item.tip }}</view> -->
							<view class="d-font-24 d-be d-m-t-20" style="margin-left: 47rpx;">{{ item.text }}</view>
							<view class="d-m-t-60 d-font-30 d-red" style="margin-top: 20rpx;">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{ item.selling_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="d-p-l-30 d-p-r-30">
					<view class="d-m-t-20 d-flex d-col-top" v-for="(item, index) in list" :key="index"
						@click="cardDetail(item.id)" style="box-shadow: 0px 6px 28px 0px rgb(8 73 162 / 11%);
		background: #fff;
		border-radius: 5px;
		padding: 10px;">
						<u-image :src="item.picture" width="290rpx" height="184rpx" radius="10rpx"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-font-30 u-line-2" style="height: 80rpx;">{{ item.name }}</view>
							<view class="d-font-24 d-be d-m-t-10">有效期：{{ item.end_date || '-' }}</view>
							<view class="d-m-t-20 d-font-30 d-red">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{ item.selling_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

		</z-paging>
	</view>
</template>

<script>
	import {
		card,
		ticket,getVenues
	} from '@/common/api';
	export default {
		data() {
			return {
				current: 0,
				list: [],
				openif: true,
				Venueslist:[]
			};
		},
		onLoad(e) {
			if (e.token) {
				uni.$u.vuex('$token', e.token);
			}
		},
		onShow() {
			this.openif = true
			this.onVenues()
		},
		methods: {
			onVenues(){
				getVenues()
					.then(res => {
						this.Venueslist = res
						console.log(res,'ppp')
					})
				
			},
			nomengban(id){
				this.openif = false
			},
			async getList(page, limit) {
				try {
					let result = this.current === 0 ? await ticket({
						page,
						limit
					}) : await card({
						page,
						limit
					});
					this.$refs.paging.complete(result.data);
				} catch (e) {
					this.$refs.paging.complete(false);
				}
			},
			setCurrent(e) {
				this.current = e.index;
				this.$refs.paging.reload(false);
			},
			ticketDetail(id) {
				uni.$u.route({
					url: '/pages/home/ticketDetail',
					params: {
						id
					}
				});
			},
			cardDetail(id) {
				uni.$u.route({
					url: '/pages/home/cardDetail',
					params: {
						id
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-list-box {
		// box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.21);
		// box-shadow: 0px 1px 2px 0px rgba(8,26,26,0.3);
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8,73,162,0.11);
		background: #ffffff;
		border-radius: 10rpx;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ff4105;
	}

	.d-bold {
		font-weight: bold;
	}
</style>